<template>
  <el-dialog
    :title="!dataForm.id ? '新增图书' : '修改图书'"
    :close-on-click-modal="false"
    :visible.sync="visible"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="140px"
    >
      <el-form-item label="ISBN编号" prop="isbn">
        <div class="box" style="display: flex">
          <el-input
            v-model="dataForm.isbn"
            placeholder="ISBN编号"
            style="margin-right: 20px"
          ></el-input>
          <el-button type="primary" @click="selectISBN()">Query ISBN</el-button>
        </div>
      </el-form-item>
      <el-form-item label="Name" prop="name">
        <el-input v-model="dataForm.name" placeholder="名称"></el-input>
      </el-form-item>
      <el-form-item label="author" prop="author">
        <el-input v-model="dataForm.author" placeholder="作者"></el-input>
      </el-form-item>

      <el-form-item label="publisher" prop="publisher">
        <el-input v-model="dataForm.publisher" placeholder="发行者"></el-input>
      </el-form-item>
      <el-form-item label="language" prop="language">
        <el-input v-model="dataForm.language" placeholder="语言"></el-input>
      </el-form-item>
      <el-form-item label="descirption" prop="descirption">
        <el-input v-model="dataForm.descirption" placeholder="描述"></el-input>
      </el-form-item>

      <div class="box" style="display: flex; margin-right: px">
        <el-form-item label="price" prop="price">
          <el-input v-model="dataForm.price" placeholder="价格"></el-input>
        </el-form-item>
        <el-form-item label="count" prop="count">
          <el-input v-model="dataForm.count" placeholder="数量"></el-input>
        </el-form-item>

        <el-form-item label="location" prop="location">
          <el-cascader
            v-model="values"
            :options="options"
            :props="{ expandTrigger: 'hover' }"
            @change="handleChange"
          ></el-cascader>
        </el-form-item>

      </div>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      values: [],
      options: [
        {
          value: "",
          label: "",
          children: [],
        },
      ],
      visible: false,
      dataForm: {
        id: 0,
        name: "",
        author: "",
        isbn: "",
        publisher: "",
        language: "",
        descirption: "",
        price: "",
        count: "",
        location: "",
        imgUrl: "",
      },
      dataRule: {
        name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        author: [{ required: true, message: "作者不能为空", trigger: "blur" }],
        isbn: [
          { required: true, message: "ISBN编号不能为空", trigger: "blur" },
        ],
        publisher: [
          { required: true, message: "发行者不能为空", trigger: "blur" },
        ],
        language: [
          { required: true, message: "语言不能为空", trigger: "blur" },
        ],
        descirption: [
          { required: true, message: "描述不能为空", trigger: "blur" },
        ],
        price: [{ required: true, message: "价格不能为空", trigger: "blur" }],
        count: [{ required: true, message: "数量不能为空", trigger: "blur" }],
        values: [
          { required: true, message: "位置不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    console.log("获取树状位置");
    axios.get("http://101.42.249.49:8083/ware/location/listtree").then((res) => {
      console.log(res.data.resList);
      this.options = res.data.options;
      // this.options.children=res.data.resList;
      console.log(this.options);
    });
  },
  methods: {
    handleChange(value) {
      console.log(value);
    },
    init(id) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(`/ware/book/info/${this.dataForm.id}`),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.book.name;
              this.dataForm.author = data.book.author;
              this.dataForm.isbn = data.book.isbn;
              this.dataForm.publisher = data.book.publisher;
              this.dataForm.language = data.book.language; 
              this.dataForm.descirption = data.book.descirption;
              this.dataForm.price = data.book.price;
              this.dataForm.count = data.book.count;
              this.dataForm.location = data.book.location;
            }
          });
        }
      });
    },
    selectISBN() {
      axios
        .get(
          `https://api.jike.xyz/situ/book/isbn/${this.dataForm.isbn}?apikey=12515.01f2bfb42642728db30fc8a06b0bd747.5c6e2209e5d57e9668a4e83f791a6a7e`,
          {}
        )
        .then((res) => {
          console.log(res);
          this.dataForm.name = res.data.data.name;
          this.dataForm.author = res.data.data.author;
          this.dataForm.publisher = res.data.data.publishing;
          this.dataForm.language = res.data.data.language;
          this.dataForm.descirption = res.data.data.description;
          this.dataForm.price = res.data.data.price | 0;
          this.dataForm.count = res.data.data.num;
          // console.log(res.data.data.name);
        });

    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          axios
            .get(
              `https://www.mxnzp.com/api/barcode/create?content=${this.dataForm.isbn}&width=500&height=300&type=0&app_id=ctmmrqmlmvbopuom&app_secret=ekI4SHN6OEtVY2tvQTI1Um03bnlpZz09`
            )
            .then((res) => {
              this.dataForm.imgUrl = res.data.data.barCodeUrl;
              var arr=this.values
              console.log("图片获取成功", res.data.data.barCodeUrl);
              console.log("数组列表为",this.value)
              var locationStr=arr[0]+"F"+"/"+arr[1]+"C"+"/"+arr[2]+"R"
              console.log("书籍地址",locationStr)
              this.$http({
                url: this.$http.adornUrl(
                  `/ware/book/${!this.dataForm.id ? "save" : "update"}`
                ),
                method: "post",
                data: this.$http.adornData({
                  id: this.dataForm.id || undefined,
                  name: this.dataForm.name,
                  author: this.dataForm.author,
                  isbn: this.dataForm.isbn,
                  publisher: this.dataForm.publisher,
                  language: this.dataForm.language,
                  descirption: this.dataForm.descirption,
                  price: this.dataForm.price,
                  count: this.dataForm.count,
                  location: locationStr,
                  imgUrl: this.dataForm.imgUrl,
                }),
              }).then(({ data }) => {
                if (data && data.code === 0) {
                  this.$message({
                    message: "操作成功",
                    type: "success",
                    duration: 1500,
                    onClose: () => {
                      this.visible = false;
                      this.$emit("refreshDataList");
                    },
                  });
                } else {
                  this.$message.error(data.msg);
                }
              });
            });
        }
      });
    },
  },
};
</script>


<style scoped>
.el-cascader-menu {
  height: 300px;
}
</style>
